<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <div class="flex justify-between">
                    <span>栏目筛选</span>
                    <div class="flex justify-between items-center">
                        <div class="w-24 font-bold">模糊搜索</div>
                        <el-input v-model="keywords" placeholder="输入关键字,并直接回车"
                                  @keyup.enter.native="searchFuzzy(page=1,keywords)">
                        </el-input>
                    </div>
                </div>
            </div>
            <div v-if="categories">
                <el-badge v-for="(category,index) in categories" v-if="category.pid!==0"
                          :key="index"
                          :max="99" :value="category.count" class="item mx-3" type="success">
                    <el-button size="small" @click="searchFilter(page=1,category)">{{ category.title }}</el-button>
                </el-badge>
            </div>
        </el-card>
        <el-card class="box-card mt-3" shadow="never">
            <div slot="header" class="clearfix">
                <span>文章列表</span>
            </div>
            <el-table :data="contents.data" border
                      size="mini" style="width: 100%">
                <el-table-column label="文章id" prop="id" width="80"></el-table-column>
                <el-table-column #default="{row:content}" label="名称" width="180">
                    <span>{{ content.title | ellipsis_Title }}</span>
                </el-table-column>
                <el-table-column #default="{row:content}" label="推荐" width="80">
                    <el-tag v-if="content.recommended==1" size="mini" type="danger">推荐</el-tag>
                </el-table-column>
                <el-table-column #default="{row:content}" label="置顶" width="80">
                    <el-tag v-if="content.top==1" size="mini" type="warning">置顶</el-tag>
                </el-table-column>
                <el-table-column #default="{row:content}" label="描述">
                    <span>{{ content.description | ellipsis_Content }}</span>
                </el-table-column>
                <el-table-column label="栏目名称" prop="category_title" width="180"></el-table-column>

                <el-table-column #default="{row:content}" label="操作" width="240">
                    <el-button-group>
                        <el-button size="mini" type="primary" @click="edit(content)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(content)">删除</el-button>
                        <el-button size="mini" type="success"
                                   @click="$router.push({name:'admin.content.show',params:{id:content.id}})">查看
                        </el-button>
                    </el-button-group>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    v-if="contents.meta"
                    :current-page="contents.meta.current_page"
                    :page-size="5"
                    :total="contents.meta.total"
                    background
                    layout="total,prev, pager, next"
                    @current-change="load"
                >
                </el-pagination>
            </div>
        </el-card>

    </div>
</template>

<script>

import tabs from './tabs'

export default {
    route: {path: `/admin/content/index`, meta: {title: '文章列表'}},
    data() {
        return {
            tabs,
            contents: [],
            categories: [],
            category_id: 1,//按分类查询
            keywords: '',//模糊关键字搜索
            way: 'load',//查询方式
            condition: {url: 'admin/content'}
        }
    },
    async created() {
        await this.load()
        this.categories = await axios.get('admin/category')
    },
    methods: {
        async load(page = 1, condition) {
            switch (this.way) {
                case 'load':
                    this.condition = {url: `admin/content?page=${page}`}
                    this.contents = await axios.get(this.condition.url, {keywords: this.keywords});
                    break;
                case 'searchFilter' :
                    if (condition) {
                        this.category_id = condition.id
                    }
                    //1、首次点击的时候存一下url
                    //2、避免后面点击分页的时候获取不到category_id
                    this.condition = {url: `admin/category/${this.category_id}/content?page=${page}`}
                    this.contents = await axios.get(this.condition.url);

                    break;
                case 'searchFuzzy':
                    if (condition) {
                        this.keywords = condition
                    }
                    this.condition = {url: `admin/content/fuzzy?page=${page}`}
                    this.contents = await axios.post(this.condition.url, {keywords: this.keywords});
                    break;
            }
        },
        searchFilter(page = 1, category) {
            this.way = 'searchFilter'
            this.load(page, category)
        },
        searchFuzzy(page = 1, keywords) {
            this.way = 'searchFuzzy'
            this.load(page, keywords)
        },
        edit(content) {
            this.$router.push({name: 'admin.content.edit', params: {id: content.id}});
        },
        async del(content) {
            this.$confirm(`确定删除【${content.title}】吗？`, '温馨提示').then(async _ => {
                await axios.delete(`admin/content/${content.id}`)
                this.contents.data.splice(this.contents.data.indexOf(content), 1)
            })
        },
    },
}
</script>

<style>
.item {
    margin-top: 10px;
    margin-right: 10px;
}
</style>
